$(".slide").each(function() //���������� � ������ ��������
{
    var picture = $(this);
    $(picture).append("<div class='navig'></div>");
    $(picture).find("li").each(function() {
    $(picture).find(".navig").append("<span src='"+$(this).index()+"'></span>");
    $(this).addClass("slide"+$(this).index());
    });
    $(picture).find("span").first().addClass("start"); //������� ������ �����
});

function slider (picture, sld)
{
    var ul = $(sld).find("ul"); // ��� �����
    var block = $(sld).find("li.slide"+picture); //��� ��������
    var wdth = $(block).width();
    $(ul).animate({marginLeft: "-"+wdth*picture}, 500);
}

function slide()
{
    var sld = $(this).closest(".slide");
    $(sld).find("span").removeClass("start");
    $(this).addClass("start");
    var picture = $(this).attr("src");
    slider(picture, sld);
}

//setInterval(slide, 1000);

$(document).on("click", ".slide .navig span", function()
{
    var sld = $(this).closest(".slide");
    $(sld).find("span").removeClass("start");
    $(this).addClass("start");
    var picture = $(this).attr("src");
    slider (picture, sld);
    return false;
});